<template>
	<div id="recent-invoke-count-chart"></div>
</template>
<script setup lang="ts">
import { Chart } from '@antv/g2';
import { onBeforeMount, onMounted, ref, watchEffect } from 'vue';
import api from '@/api';
import RecentInvokeCountVO = API.RecentInvokeCountVO;

interface ChartData {
	DateTime: string;
	DailyInvokeCount: number;
}

let chart;
const x = 'DateTime';
const y = 'DailyInvokeCount';

const mounted = ref(false);
const data = ref<Array<ChartData>>([]);

const renderChart = () => {
	chart = new Chart({
		container: 'recent-invoke-count-chart',
		autoFit: true,
	});
	chart.line().data(data.value).encode('x', x).encode('y', y);
	chart.options({
		type: 'view',
		autoFit: true,
		data: data.value,
		encode: { x: x, y: y },
		scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
		children: [
			{ type: 'line', data: data.value, labels: [{ text: y, style: { dx: -10, dy: -12 } }] },
			{ type: 'point', style: { fill: 'white' }, tooltip: true },
		],
	});
	chart.render();
};
onMounted(() => {
	mounted.value = true;
});
onBeforeMount(() => {
	api.analysisController.retrieveRecentDaysInvokeCount({ days: 10 }).then(response => {
		const array = response.data.data as Array<RecentInvokeCountVO>;
		data.value = array.map(item => {
			return {
				DateTime: item.dateTime,
				DailyInvokeCount: Number.parseInt(item.dailyInvokeCount),
			};
		});
	});
});
watchEffect(() => {
	if (mounted.value) {
		renderChart();
	}
}, [mounted, data]);
</script>

<style scoped></style>
